import { Space } from 'antd';
import React from 'react';
import './index.less'
export default () => {
    React.useEffect(() => {
        setTimeout(() => {
            const dom = document.querySelector('.loading-css-auto') as HTMLElement
            dom.classList.add('loading-css-auto-hover')
        }, 10)
    }, [])

    React.useLayoutEffect(() => {
        const dom = document.querySelector('.loading-js') as HTMLElement
        let start: any
        function step(timestamp: any) {
            if (start === undefined) {
                start = timestamp
            }
            const elapsed = timestamp - start;
            dom.style.width = `${((elapsed / 2000) * 400).toFixed(0)}px`
            if (elapsed < 2000) {
                requestAnimationFrame(step)
            }
        }
        requestAnimationFrame(step)
    }, [])
    return (
        <Space direction="vertical" className="loading">
            css3 transition(hover后变化)
            <div className="loading-css"></div>
            自动变化（变速）
            <div className="loading-css-auto"></div>
            animation
            <div className="loading-animation"></div>
            js（匀速）
            <div className="loading-js"></div>
        </Space>
    )
}